<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link href="__STATIC_URL__/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/cardlist.css"/>
    <script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/layer/layer.js"></script>
    <style>
        .glyphicon-plus:before {
            margin-left: 3px;
        }

        .btn-link:hover {
            text-decoration: none;
        }
        .cardL-logo {
            width: 27px;
            height: 27px;
        }
        .cardL-name {
            font-size: 14px;

        }
        .card {

            padding: 10px 9px;
        }
    </style>
</head>
<body id="body">
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content" id="page-memberCardSettings">
        <!--路径导航-->
        <ol class="breadcrumb mgl15 mgr15">
            <li>当前位置是&nbsp;:</li>
            <li><a href="javascript:void(0);">会员卡列表</a></li>
        </ol>
        <!--创建会员卡主要内容-->
        <div class="card-content mgl15 mgr15 clearfix">
            <form class="form-horizontal ">
                <div class="panel panel-default">
                    <div class="panel-heading">会员卡列表</div>
                    <div class="panel-body">
                        <div class=" member_card-list responsive row">
                            {volist name="list" id="vo"}
                            <div class="pull-left pd15">
                                <a href="{:url('alicards/cardinfoali',['template_id'=>$vo['template_id']])}">
                                    {notempty name="vo.bg_url_abs"}
                                    <div class="card" style="background-image: url({$vo.bg_url_abs});background-position:center center;background-repeat: repeat;background-size: cover;">
                                        {else/}
                                        <div class="card" style="background-image: url(__STATIC_URL__/static/mobile/images/card_b.png);background-color: {$vo['bg_color']};background-position: left top;background-repeat: repeat;background-size: cover;">
                                            {/notempty}
                                            <div class="cardL-top">
                                                <div class="cardL-logo-wrap pull-left">
                                                    <div style="background-size: cover;background-image:url({$vo.logo_url_abs});background-position:left top;"  class="cardL-logo logopic"></div>
                                                </div>
                                                <div class="pull-left">
                                                    <div class="cardL-name brand_title"style="line-height:27px;">{$vo.card_show_name}</div>
                                                </div>
                                            </div>
                                            <div class="cardbottom pd15 clearfix" style="">
                                                <div class="pull-left"></div>
                                            </div>
                                        </div>
                                </a>
                                <div class="pd15 clearfix">

                                    <a class="btn-link pull-left" href="{:url('alicards/getlistali',['template_id'=>$vo['template_id']])}">会员列表&nbsp;&nbsp;</a>

                                    <a class="btn-link pull-left" href="{:url('alicards/cardinfoali',['template_id'=>$vo['template_id']])}">|&nbsp;&nbsp;控制面板&nbsp;&nbsp;</a>

                                    <!--<a class="btn-link pull-left" href="{:url('alicards/delcardsali',['template_id'=>$vo['template_id']])}">|&nbsp;&nbsp;删除&nbsp;&nbsp;</a>-->

                                </div>
                            </div>
                            {/volist}
                            {if condition="$card.only eq 0 "}

                                <div class="pull-left  pd15">
                                    <div class="member_card-item">
                                        <a href="javascript:;" data-toggle="modal" data-target="#myModal">
                                            <div class="member_card-body">
                                                <i class="glyphicon glyphicon-plus"></i>
                                                <div class="r-desc">创建会员卡</div>
                                            </div>
                                        </a>
                                    </div>
                                </div>

                            {/if}
                        </div>
                        {$list->render()}
                    </div>
                </div>
            </form>
        </div>
        {include file='public/footer'/}
    </div>
</section>
<!--获取创建会员卡门店列表-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header" style="background: #F4F5F9;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">选择门店</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default panel-modal" style="border: 0;">
                    <div class="panel-heading"
                         style="overflow: hidden;background: #F4F5F9;border: 1px solid #ddd;border-bottom: 0;">
                        <div class="checkbox pull-left">
                            <label>门店名称</label>
                        </div>
                        <div class="checkbox pull-right" style="margin-top: 10px;">
                            <label>地址</label>
                        </div>
                    </div>
                    <div class="panel-body" style="padding: 0;">
                        <table class="table table-bordered">
                            <tbody id="tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer"
                 style="text-align: center;overflow: hidden;background: #F4F5F9;border: 1px solid #ddd;border-top: 0;">
                <button type="button" class="btn btn-success" id="choiceComplate">完成</button>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(function () {
        //        监听模态框显示调取门店数据
        $('#myModal').on('show.bs.modal', function () {
            $.ajax({
                url: "{:url('mach/getmachlist')}",
                type: "post",
                success: function (data) {
                    var datas = data.data;
                    if (datas == "") {
                        $("#tbody").html("<tr><td>暂无门店</td></tr>");
                    } else {
                        var trlist = "";
                        for (var i = 0; i < datas.length; i++) {
                            trlist += "<tr>" +
                                "<td style='padding-left: 32px;'><div class='radio pull-left'><label><input type='radio' name='mallcheck' data-id='" + datas[i].id + "'>" + datas[i].merchant + "</label></div></td>" +
                                "<td><div class='radio pull-left'><label></label></div></td>" +
                                "</tr>"
                        }
                        $("#tbody").html(trlist);
                    }
                }
            })
        });
//        选择适用门店模态框数据清空
        $('#myModal').on('hide.bs.modal', function () {
            $("#tbody").html("");
        });
//        选择适用门店完成
        $('#choiceComplate').click(function () {
            var url = "{:url('alicards/creatcardsali')}";
            var len = $("input[name='mallcheck']").length;
            var checkid = "";
            for (var i = 0; i < len; i++) {
                if ($("input[name='mallcheck']").eq(i).is(':checked')) {
                    var id = $("input[name='mallcheck']").eq(i).attr("data-id");
                        checkid = id;
                }
            }
            if (checkid == "") {
                layer.alert("请选择门店");
                return false;
            } else {
                window.location.href="{:url('alicards/creatcardusali')}?mid="+checkid;
                $('#myModal').modal("hide");
            }

        });
    })
</script>
</body>

</html>
